import React, { useState, useEffect } from 'react';
import { Form, Input, Modal, Select, TreeSelect, DatePicker } from 'antd';
import { queryDeviceList } from '@/services/device';
import moment from 'moment'
const { TextArea } = Input;

const { Option } = Select;

const FormItem = Form.Item;

export interface CreateFormProps {
  treeData?: API.TreeNodeItem[];
  modalVisible: boolean;
  values?: any;
  patrolJob?: any;
  onSubmit: (values: API.DefectRecordItem) => void;
  onCancel: () => void;
}

const formLayout = {
  labelCol: { span: 5 },
  wrapperCol: { span: 15 },
};

const CreateDefect: React.FC<CreateFormProps> = (props) => {

  const [form] = Form.useForm();
  
  const [deviceData, setDeviceData] = useState<API.DeviceItem[]>([]);

  const { modalVisible, onSubmit: handleAdd, onCancel, treeData, values } = props;

  const okHandle = async () => {
    const fieldsValue = await form.validateFields();
    form.resetFields();
    handleAdd(fieldsValue);
  };

  const onChange = async (value: string, label: any[]) => {
    const dList = await queryDeviceList({ areaId: value,useState:1 });
    setDeviceData(dList);
  };

  const setStateData = async () => {
  
    const dList = await queryDeviceList({ areaId: values.areaId });
    console.log(dList);
    setDeviceData(dList);
  };

  useEffect(() => {
    setStateData();
  }, []);

  return (
    <Modal
      width={640}
      destroyOnClose
      title="巡检转缺陷"
      visible={modalVisible}
      onOk={okHandle}
      onCancel={() => onCancel()}
    >
      <Form
        {...formLayout}
        form={form}
        initialValues={{
          deviceId: undefined,
          areaId: values.areaId+'',
          location: values.position,
          defect:  values.defectInfo  ,
        }}
      >
        <FormItem
          label="设备所在区域"
          name="areaId"
          rules={[{ required: true, message: '请选择所在区域' }]}
        >
          <TreeSelect
            style={{ width: '100%' }}
            dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
            treeData={treeData}
            onChange={onChange}
            placeholder="请选择所在区域"
            key="key"
            treeDefaultExpandAll
          />
        </FormItem>
        <FormItem
          label="设备名称"
          name="deviceId"
          rules={[{ required: true, message: '请输入设备名称' }]}
        >
          <Select
            showSearch
            placeholder={'请选择设备'}
            filterOption={(input, option) =>
              option?.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
            }
          >
            {deviceData?.map((item) => (
              <Option key={item.deviceId} value={item.deviceId ?? ''}>
                {item.deviceName}
              </Option>
            ))}
          </Select>
        </FormItem>
        <FormItem
          label="缺陷地点"
          name="location"
          rules={[{ required: true, message: '请输入缺陷地点' }]}
        >
          <Input placeholder="请输入" autoComplete='off' />
        </FormItem>
        <FormItem
          label="缺陷内容"
          name="defect"
          rules={[{ required: true, message: '请输入缺陷内容' }]}
        >
          <TextArea placeholder="请输入" showCount maxLength={100} />
        </FormItem>
      
      </Form>
    </Modal>
  );
};

export default CreateDefect;
